<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	*{ 
		padding:0;
	 margin:0; 
	 list-style:none;
	 }
	div{ 
		width:300px;
	 height:300px;
	  border:1px solid groove;
	   margin:100px auto;
	   }
	input{ 
		width:100px; 
		float:left;
		 height:30px;
		 background: greenyellow;
		 border: none;
		 }
	.active{
		 background:plum;
		  color:peru;
		  }
	li{
		 width:300px;
		  height:270px; 
		  background:palegreen; 
		  font-size:100px;
		   text-align:center;
		    line-height:270px; 
		    color:black;
		     display:none;
		     }
	.show{
		 display:block;
		 }
	section{
		overflow:hidden;
		}
</style>
<script>
class Tab{
		constructor(){
			//属性
			this.aBtnList=document.querySelectorAll('.btnBox input');
			this.aLiList=document.querySelectorAll('.tab li');
		}
		show(){
			var _this=this;
			for(let i=0; i<this.aBtnList.length;i++){
				this.aBtnList[i].onclick=function(){
					_this.fn(i);	
				};
			}		
		}
		fn(i){
			console.log(this);//自动转向对象本身
			for(var j=0;j<this.aLiList.length;j++){
				this.aBtnList[j].className='';
				this.aLiList[j].className='';
			}
			this.aLiList[i].className='show';
			this.aBtnList[i].className='active';		
		}
	}
		
	window.onload=function(){	
		var n=new Tab();
		n.show();
   }
</script>
</head>

<body>
	<div class="tab">
    	<section class="btnBox">
        	<input class="active" type="button" value="按钮1" />
            <input type="button" value="按钮2" />
            <input type="button" value="按钮3" />
        </section>
        <ul>
        	<li class="show">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>











